<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        /* 
        json对象，和js自定义对象很像，
        JSON JavaScript Object notation js对象表示法，是通过js标记书写的文本
        
        */

        //js自定义对象
        var jsObj = {
            name:'zs',
            age:30
        }



        //json对象
        //json 大括号包裹 键值对形式 键必须用双引号包起来，值可以是任何类型
        var jsonObj = {
            "name":"zs",
            "age":30
        }


        //在js中JSON对象有两种形式存在 1.字符串形式   2.对象形式

        //js提供了方法对象形式与字符串形式转换的方法

        //json对象=json字符串
        var jsonStr  = JSON.stringify(jsonObj);
        //console.log(jsonStr);//'{"name":"zs","age":30}'
        //console.log(typeof jsonStr);//String

        //age  
        //json对象获取    最好操作的
        var ag1 =jsonObj.age;


        //json字符串获取 各种截取 各种遍历
       //var ag2 = jsonStr.indexOf('age');

       //json字符串=> json对象
       var jsonObj1 = JSON.parse(jsonStr);
       console.log(typeof jsonObj1);

       /* 
       理解：
       在前后端交互时：
       早期：前后端不分离，使用表单  超连接  等跳转到后台查询数据  存储域对象 用el获取显示
       现在：前后端分离，我们访问服务器使用的是js,该技术叫做Ajax,此方式：
       前端中使用的是JSON对象，比较方便赋值 取值

       前后端传输：需要json字符串

       后端中使用的是JAVA对象，查询后 操作前
       此时就涉及到：
        前端（json对象）  <=>   需要字符串（json字符串）     <=>  后端（java对象）

        json对象与json字符串互转  （以后框架中自己完成）
            -json对象-json字符串 JSON.stringify(jsonObj);
            -json字符串-json对象 JSON.parse(jsonStr);


        java对象与json字符串互转  （后面会讲）
            利用阿里巴巴：FastJSON 或 谷歌的GSON
            -java对象-json字符串 JSON.toJSONString(javaObj);
            -json字符串-java对象 JSON.parseObject(jsonStr);
       
       */
      

       var str = '{"name":"zs","age":30}';//json字符串

       //json对象可以很复杂 了解 可以利用json格式化工具
       var jsonObj001 = {
         "key1":"value1",
         "key2":[
            {
                "key2-1":"value2-1",
                "key2-2":"value2-2",
                "key2-3":false,
                "key2-4":null,
                "key2-5":123,
                "key2-6":123.456,
                "key2-7":[1,2,3,4,5,6,7,8,9,10],
                "key2-8":{
                    "key2-8-1":"value2-8-1",
                    "key2-8-2":"value2-8-2"
                },
                "key2-9":[{"hobby":["篮球","足球"]}]
            },{
                "key2-1":"value2-1"
            },{
                "key2-1":"value2-1"
            },{
                "key2-2":"value2-2"
            },{
                "key2-3":"value2-3"
            }
         ]
       }

    </script>
</head>
<body>
    
</body>
</html>